

var keybord = document.getElementById('keybord');
var xiaosheng = document.getElementById('xiaosheng');
var wuya = document.getElementById('wuya');
var xusheng = document.getElementById('xusheng');
var qingkuai = document.getElementById('qingkuai');
var iloveyou = document.getElementById('iloveyou');
var bgm = document.getElementById('bgm');
var didi = document.getElementById('didi');
function audioAutoPlay(audio) {
  audio.play();
}
function audioAutoPause(audio) {
  audio.pause();
}
function audioStartAll() {
  keybord.volume = 0;
  xiaosheng.volume = 0;
  wuya.volume = 0;
  xusheng.volume = 0;
  qingkuai.volume = 0;
  bgm.volume = 0;
  didi.volume = 0;
  iloveyou.volume = 0;
  keybord.play();
  xiaosheng.play();
  wuya.play();
  xusheng.play();
  qingkuai.play();
  bgm.play();
  didi.play();
  iloveyou.play();
}
function audioStopAll() {
  keybord.pause();
  xiaosheng.pause();
  wuya.pause();
  xusheng.pause();
  qingkuai.pause();
  bgm.pause();
  didi.pause();
  iloveyou.pause();
  keybord.volume = 1;
  xiaosheng.volume = 1;
  wuya.volume = 1;
  xusheng.volume = 1;
  qingkuai.volume = 0.3;
  bgm.volume = 0.3;
  didi.volume = 1;
  iloveyou.volume = 1;
}


$(document).ready(function () {
  var ActionFunction = function () {
    var $Page0 = $("#page0")
    var $Page1 = $("#page1")
    var $Page2 = $("#page2")
    var $Page4 = $("#page4")
    var $Page5 = $("#page5")
    var $Page6 = $("#page6")
    var $Page7 = $("#page7")


    // Page0逻辑

    var page0Fun = function () {
      console.log("页面载入")
      var onloadCount = 0;
      var countTimer = window.setInterval(function () {
        if (onloadCount > 100) {
          clearInterval(countTimer)
          // window.location.href = "./page1.html"
          $Page0.hide();
          $Page1.show();
          audioAutoPlay(didi);
        } else {
          $("#page0 .onload span").html(onloadCount++)
        }
      }, 100)

    }

    page0Fun();



    // Page1逻辑


    var page1Fun = function () {
      var $page1btn = $("#page1 .open_icon")
      var $page1open = $("#page1 #open_box")
      // console.log("$page1open", $page1open)
      var page1startX,
        page1startY,
        page1distance,
        page1maxX,
        page1openWidth,
        page1iconWidth;
      page1openWidth = $page1open.width();
      page1iconWidth = $page1btn.width();

      // console.log("page1openWidth", page1openWidth)
      // console.log("page1iconWidth", page1iconWidth)



      page1maxX = page1openWidth - page1iconWidth;
      // console.log("maxX", maxX)

      $page1open.on("touchstart", function (e) {
        // console.log("e", e)
        page1startX = e.originalEvent.changedTouches[0].pageX;
        // console.log("startX", startX)
      });

      $page1open.on("touchmove", function (e) {

        var page1openLeft = $page1open.offset().left;
        // console.log("openLeft", openLeft)
        var page1iconLeft = $page1btn.offset().left;
        if (page1iconLeft >= page1openLeft + page1openWidth - page1iconWidth) {
          return;
        } else {
          page1moveEndX = e.originalEvent.changedTouches[0].pageX;
          page1x = page1moveEndX - page1startX;
          if (0 < page1x < page1maxX) {
            $page1btn.css('left', page1x);
          }
        }


      });

      $page1open.on("touchend", function (e) {

        var page1openWidth = $page1open.width();
        var page1iconWidth = $page1btn.width()
        var page1openLeft = $page1open.offset().left;
        // console.log("openLeft", openLeft)
        var page1iconLeft = $page1btn.offset().left;
        if (page1iconLeft >= page1openLeft + page1openWidth - page1iconWidth) {
          // window.location.href = "./page2.html"


          $Page1.hide();
          $Page2.show();
          audioAutoPlay(qingkuai);
          page2Fun();
          return;
        } else {
          $page1btn.css('left', -2);
        }


      });
    }

    page1Fun();


    //page2逻辑
    var page2Fun = function () {
      var $word1 = $(".word1")
      var $word2 = $(".word2")
      var $word3 = $(".word3")
      var $word4 = $(".word4")
      var $word5 = $(".word5")
      var $word6 = $(".word6")
      var $page2Btn = $("#page2 .button")
      var $page2 = $("#page2");
      var tag = 1;

      window.setTimeout(function () {

        $word1.addClass("word1_animation")
        window.setTimeout(function () {

          $word2.addClass("word2_animation")
          window.setTimeout(function () {

            $word3.addClass("word3_animation")
            window.setTimeout(function () {

              $word4.addClass("word4_animation")
              window.setTimeout(function () {

                $word5.addClass("word5_animation")
                window.setTimeout(function () {

                  $word6.addClass(
                    "word6_animation"
                  )
                  window.setTimeout(
                    function () {
                      $Page2.hide();
                      $Page4.fadeIn();
                      page4Fun();

                    }, 3500)
                }, 1500)
              }, 1500)
            }, 2500)
          }, 1500)
        }, 1500)
      }, 0);

      $page2Btn.on(
        "click",
        function () {
          // window
          //     .location
          //     .href =
          //     "./page4.html";

          $Page2.hide();
          $Page6.fadeIn();
          page6Fun();
          audioStopAll();
          audioAutoPlay(bgm);
        })




      function changeBg() {
        if (tag === 1) {
          tag = 2
          $page2.css("background-image", "url('./assets/images/page2/page2_bg2.png')");

        } else if (tag === 2) {
          tag = 1
          $page2.css("background-image", "url('./assets/images/page2/page2_bg1.png')");
        }
      }

      window.setInterval(function () {
        changeBg();
      }, 200)
    }



    // page4逻辑

    var page4Fun = function () {

      $(".red-zhuzi").addClass("high-count");
      $(".msg1").addClass("jian-ru-boy");
      $(".boy").show().addClass("boy-in");
      audioAutoPlay(keybord);
      setTimeout(function () {
        $(".circle").fadeIn();
        $(".girl").show().addClass("girl-in");
        $(".msg2").addClass("jian-ru-girl");
      }, 1000);
      setTimeout(function () {
        $(".msg3").addClass("jian-ru-boy");
        audioAutoPlay(keybord);
      }, 3000);
      setTimeout(function () {
        $(".msg4").addClass("jian-ru-girl");
      }, 5000);
      setTimeout(function () {
        $(".break-heart").fadeIn();
        audioAutoPlay(xiaosheng);
      }, 5000);
      setTimeout(function () {
        $(".msg-fail1").show().addClass("fail1-show");
      }, 6000);
      setTimeout(function () {
        $(".msg-fail2").show().addClass("fail2-show");
      }, 7000);
      setTimeout(function () {
        $(".biao-bai1").fadeOut();
      }, 8000);

      // 第二段
      setTimeout(function () {
        $(".high-count").addClass("high-count2");
        $(".msg11").addClass("jian-ru-boy");
        $(".heart").show().addClass("boy-in");
        audioAutoPlay(keybord);
      }, 8000);
      setTimeout(function () {
        $(".msg22").addClass("jian-ru-girl");
        $(".circle2").fadeIn();
      }, 9000);
      setTimeout(function () {
        $(".msg33").addClass("jian-ru-boy");
      }, 10000);
      setTimeout(function () {
        $(".msg44").addClass("jian-ru-girl");
        audioAutoPlay(wuya);
      }, 11000);
      setTimeout(function () {
        $(".heart").attr("src", "img4/broken_heart3.png");
        $(".msg-fail11").show().addClass("fail1-show");
      }, 13000);
      setTimeout(function () {
        $(".msg-fail22").show().addClass("fail2-show");
      }, 13600);
      setTimeout(function () {
        $(".biao-bai1").fadeOut();
      }, 15000);
      setTimeout(function () {
        $(".biao-bai2").fadeOut();
      }, 16000);


      // 第三段
      setTimeout(function () {
        $(".high-count").addClass("high-count3");
        $(".man").show().addClass("boy-in");
        $(".msg111").addClass("jian-ru-boy");
        audioAutoPlay(keybord);
      }, 17000);
      setTimeout(function () {
        $(".woman").show().addClass("girl-in");
        $(".msg222").addClass("jian-ru-girl");
      }, 18000);
      setTimeout(function () {
        $(".msg333").addClass("jian-ru-boy");
        audioAutoPlay(keybord);
      }, 19000);
      setTimeout(function () {
        $(".msg444").addClass("jian-ru-girl");
      }, 20000);
      setTimeout(function () {
        $(".man").addClass("man2").attr("src", "img4/man2.png");
        $(".msg-fail111").show().addClass("fail1-show");
        audioAutoPlay(xusheng);
      }, 22000);
      setTimeout(function () {
        $(".msg-fail222").show().addClass("fail2-show");
      }, 23000);

      setTimeout(function () {
        $(".page4").fadeOut();
        $(".page5").fadeIn();
        audioAutoPause(qingkuai);
        audioAutoPlay(iloveyou);
      }, 24000);
      setTimeout(function () {
        $(".left-fly-heart").show().addClass("flying_left");
        $(".right-fly-heart").show().addClass("flying_right");
        $(".page5").fadeIn();
        $(".page5-word1").show().addClass("word1-in");
      }, 25000);
      setTimeout(function () {
        $(".page5-word2").show().addClass("word2-in");
      }, 26000);
      setTimeout(function () {
        $(".page5-word3").show().addClass("word3-in");
      }, 28000);
      setTimeout(function () {
        $(".page5-word4").show().addClass("word4-in");
      }, 30000);
      setTimeout(function () {
        $(".page5-word5").show().addClass("word5-in");
      }, 32000);

      // 指纹点击
      var defaultHeight = 1.1;
      var defaultBottom = 3.4;
      $(".zhiwen").click(function () {
        defaultHeight = defaultHeight + 0.3;
        defaultBottom = defaultBottom + 0.3;
        if (defaultHeight > 8.9) {
          $(".zhuzi").addClass("zhuzi-full");
          $Page4.fadeOut();
          $Page5.fadeOut();
          $Page6.fadeIn();
          audioAutoPause(iloveyou);
          audioAutoPlay(bgm);
        } else {
          $(".zhuzi").removeClass("zhuzi-move").css("height", defaultHeight + "rem");
        }
        $(".jump_heart").css("bottom", defaultBottom + "rem");
      })
    }

    //page6逻辑

    var page6Fun = function () {
      $page6Arrow = $("#page6 .arrow");
      $page6Input = $("#page6 .name_input");
      $page6Selection = $("#page6 .place_select");
      $page6Dia = $("#page6 .tipsbg")
      $page6DiaCon = $("#page6 .tipsbg .dialog_content")
      $page6DiaBtn = $("#page6 .tipsbg .dialog_btn")

      function showTip(content) {
        console.log("content", content)
        $page6DiaCon.html(content);
        $page6Dia.show();
      }

      function hideTip() {
        $page6Dia.hide();
      }

      $page6DiaBtn.on("click", function () {

        $page6Dia.hide();
      })

      $page6Arrow.on("click", function () {
        var $page6InputVal = $page6Input.val()
        var $page6SelectVal = $page6Selection.val()
        if (!$page6InputVal) {
          console.log("333333333")
          showTip("请选择您想表白的对象");
        } else if ($page6SelectVal == "0") {
          showTip("请选择您想表白的坐标");
        } else {
          // window.location.href = "./page7.html?name=" + $page6InputVal + "&place=" +
          //   $page6SelectVal;
          localStorage.customerName = $page6InputVal;
          localStorage.place = $page6SelectVal;
          $Page6.fadeOut();
          $Page7.fadeIn();
          audioAutoPause(iloveyou);
          audioAutoPlay(bgm);
          page7Fun();
        }
      })
    }
    page6Fun();

    var page7Fun = function () {
      var name = localStorage.customerName || "黄彬彬";
      var place = localStorage.place || 1;
      if (place == 1) {
        $("#TaName").addClass("love-name1").text("- " + decodeURIComponent(name));
        $(".img-box .des").text("TA 在龙港新城等你");
        $("#place").attr("src", "img7/bg1.png");
      } else if (place == 2) {
        $("#TaName").addClass("love-name2").text("- " + decodeURIComponent(name));
        $(".img-box .des").text("TA 在月湖公园等你");
        $("#place").attr("src", "img7/bg2.png");
      } else {
        $("#TaName").addClass("love-name3").text("- " + decodeURIComponent(name));
        $(".img-box .des").text("TA 在恒大逸合城等你");
        $("#place").attr("src", "img7/bg3.png");
      }
      setTimeout(function () {
        html2canvas(document.getElementById("imgBox")).then(function(canvas) {
          document.body.appendChild(canvas);
          var img = document.getElementById("canvasImgBox");
          var tempSrc = canvas.toDataURL("image/png");
          img.src = tempSrc;
          var imgBoxHeight = $("#imgBox").height();
          $("#canvasImgBox").height(imgBoxHeight).show();
          $("#imgBox").remove();
        });
      }, 2000);
    }
  }
  var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    if (wx) {
      var url = window.location.href;
      $.get("http://0002.app.ehomesoft.cn/wx/jsAPISignature?url=" + url, function(data){
        wx.config({
          debug: false,
          appId:data.appId,
          timestamp:data.timestamp,
          nonceStr:data.nonceStr,
          signature:data.signature,
          jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideOptionMenu'
          ]
        });
      },"json");
      wx.ready(function() {
        audioStartAll();
        audioStopAll();
        ActionFunction();
      });
      wx.error(function () {
        audioStartAll();
        audioStopAll();
        ActionFunction();
      })
    }
  } else {
    ActionFunction();
  }
});